<template>
	<view class="container">
		<view class="d-flex mt-20">
			<view style="width: 150rpx;">
				姓名：
			</view>

			<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
		</view>
		<view class="d-flex mt-20">
			<view style="width: 150rpx;">
				证件号码：
			</view>

			<uni-easyinput v-model="baseFormData.identityNo" placeholder="请输入身份证号" />
		</view>
		<view class="d-flex mt-20">
			<view style="width: 150rpx;">
				性别：
			</view>

			<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
		</view>

		<view class="d-flex mt-20">
			<view style="width: 150rpx;">
				民族：
			</view>

			<uni-easyinput v-model="baseFormData.nation" placeholder="请输入民族" />
		</view>

		<view class="d-flex mt-20">
			<view style="width: 150rpx;">
				民族：
			</view>

			<uni-datetime-picker style="width: 300rpx;" border type="date" :value="baseFormData.birthday" />
		</view>

		<view class="d-flex mt-20">
			<view style="width: 150rpx;">
				地址：
			</view>

			<uni-easyinput v-model="baseFormData.address" placeholder="请输入地址" />
		</view>

		<button class="submit mt-20" type="primary" @click="onSubmit">下一步</button>
		
		<!-- 失败提示窗 -->
		<uni-popup ref="errorDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="规则详情" title="提示" content="很遗憾，您不符合公司用人规则" @confirm="checkDetail">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				baseFormData: {
					identityNo: "",
					nationality: "",
					sex: 0,
					birthday: "",
				},
				// 性别
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
			}
		},
		methods: {
			onSubmit() {
				console.log("下一步");
				
				// 识别失败调用
				this.$refs.errorDialog.open();
				// 识别成功调用
				// this.$refs.successDialog.open();
			},
			// 不符合条件 查看详情
			checkDetail() {
				console.log("不符合条件 查看详情");
			}
		}
	}
</script>

<style>
	.d-flex {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.container {
		width: 90vw;
	}
</style>
